{% extends "layout.html" %}
{% block content %}
<div id="timer" class="timer-box">Time Left: <span id="time">60</span>s</div>

<h2>Take the Quiz</h2>
<hr>

<form id="quizForm" action="/submit" method="POST">
    {% for q in questions %}
    <div class="card mb-3">
        <div class="card-header">
            <strong>Q{{ loop.index }}:</strong> {{ q['question_text'] }}
        </div>
        <div class="card-body">
            <div class="form-check">
                <input class="form-check-input" type="radio" name="q_{{ q['id'] }}" value="A" required>
                <label class="form-check-label">{{ q['option_a'] }}</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="q_{{ q['id'] }}" value="B">
                <label class="form-check-label">{{ q['option_b'] }}</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="q_{{ q['id'] }}" value="C">
                <label class="form-check-label">{{ q['option_c'] }}</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="q_{{ q['id'] }}" value="D">
                <label class="form-check-label">{{ q['option_d'] }}</label>
            </div>
        </div>
    </div>
    {% endfor %}
    <button type="submit" class="btn btn-success w-100">Submit Quiz</button>
</form>

<script>
    // --- TIMED QUIZ LOGIC ---
    let timeLeft = 60; // Set timer in seconds
    const timerElement = document.getElementById('time');
    
    const countdown = setInterval(() => {
        if (timeLeft <= 0) {
            clearInterval(countdown);
            alert("Time's up! Submitting your quiz.");
            document.getElementById('quizForm').submit();
        } else {
            timerElement.innerHTML = timeLeft;
            timeLeft -= 1;
        }
    }, 1000);
</script>
{% endblock %}